<template>
  <div>
    <!-- 头部模块 -->
    <div class="topBox">
      <div class="itemBox" v-for="(item, index) in topArray" :key="index">
        <img :src="item.img" alt="" class="leftBox" @click="goNextPage(item)" />
        <div class="rightBox" @click="goNextPage(item)">
          <div class="rightBot">{{ item.title }}</div>
          <div class="rightTop">{{ item.number }}</div>
        </div>
      </div>
    </div>
    <!-- 常用申请 -->
    <div class="containerBox">
      <div class="approval-label">
        常用<a-icon @click="setApp" type="setting" style="color: #1890ff; float: right; cursor: pointer" />
      </div>
      <div class="parentBox">
        <div v-if="datalist.length" style="width: 100%" class="sonBox">
          <div v-for="res in datalist" :key="res.id" @click="go(res.path)" class="icon-title">
            <div class="imgBox">
              <img :src="`${apiBaseUrlDownload}${res.attachment}`" alt="" v-if="res.attachment" />
              <img src="../../assets/home/img/2.png" alt="" v-else />
            </div>
            <div>{{ res.name }}</div>
          </div>
        </div>
        <div v-else>暂无数据</div>
      </div>
    </div>
    <a-modal
      :width="800"
      :title="modal.title"
      :visible="modal.visible"
      :confirm-loading="modal.confirmLoading"
      @ok="handleOk"
      @cancel="cancel"
    >
      <div class="app-box">
        <div class="checked-apps">
          <div><span class="font-title">已添加</span>（{{ selectTotal }}）</div>
          <div
            @click="selectApp(i)"
            :class="selectIndex == i ? 'for-apps-active' : 'for-apps'"
            v-for="(item, i) in applyList"
            :key="item.id"
          >
            {{ `${item.name}（${item.selectTotal}/${item.total}）` }}
          </div>
        </div>
        <div class="apply-box" v-if="applyList[selectIndex]">
          <div v-for="menu in applyList[selectIndex].mgtApplicationVoList" :key="menu.id">
            <div class="font-title">{{ menu.name }}</div>
            <div class="app-wrap">
              <div class="app" v-for="app in menu.mgtApplicationVoList" :key="app.id">
                <div class="imgBox">
                  <div style="display: inline-block; position: relative">
                    <img :src="`${apiBaseUrlDownload}${app.attachment}`" alt="" v-if="app.attachment" />
                    <img src="../../assets/home/img/2.png" alt="" v-else />
                    <!-- <img src="../../assets/home/img/2.png" alt="" /> -->
                    <a-icon
                      type="minus-circle"
                      theme="filled"
                      class="action-icon"
                      style="color: red"
                      v-if="app.isSelect"
                      @click="delApp(app)"
                    />
                    <a-icon
                      type="plus-circle"
                      theme="filled"
                      class="action-icon"
                      style="color: #1890ff"
                      v-else
                      @click="addApp(app)"
                    />
                  </div>
                  <!-- <img :src="require(`../../assets/home/img/${res.attachment}`)" alt="" /> -->
                </div>
                <div>{{ app.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <salesContractForm ref="salesContractForm"></salesContractForm>
    <buildWorkOrder ref="buildWorkOrder"></buildWorkOrder>
    <goodsManagementAdd ref="goodsManagementAdd"></goodsManagementAdd>
    <productionReport ref="productionReport"></productionReport>
    <inventoryOrderForm ref="inventoryOrderForm"></inventoryOrderForm>
    <outboundOrderForm ref="outboundOrderForm"></outboundOrderForm>
    <customerForm ref="customerForm"></customerForm>
    <!-- <buildOutStock ref="buildOutStock"></buildOutStock> -->
    <!-- <buildInStock ref="buildInStock"></buildInStock> -->
    <buildQuality ref="buildQuality"></buildQuality>
    <applyDeliver ref="applyDeliver"></applyDeliver>
    <applyPay ref="applyPay"></applyPay>
    <productionReportingInitForm ref="productionReportingInitFormRef"></productionReportingInitForm>
    <warehouseAdd ref="warehouseAdd"></warehouseAdd>
    <stock-check-add-form ref="stockCheckAddForm"></stock-check-add-form>
  </div>
</template>
<script>
import topOne from './homeImg/topOne.png'
import topTwo from './homeImg/topTwo.png'
import topThree from './homeImg/topThree.png'
import topFour from './homeImg/topFour.png'
import { apiBaseUrlDownload } from '@/utils/request'
import { getAction, putAction } from '../../api/manage'
import { getRoute } from '@/api/login'
import { LING_YANG_ROLE_TYPE } from '@/store/mutation-types'
export default {
  components: {
    goodsManagementAdd: (resolve) =>
      require(['@/views/warehouseManagement/goodsManagement/goodsManagementAdd'], resolve),
    // buildOutStock: (resolve) => require(['@/views/warehouseManagement/inventoryQuery/buildOutStock'], resolve),
    // buildInStock: (resolve) => require(['@/views/warehouseManagement/inventoryQuery/buildInStock'], resolve),
    buildQuality: (resolve) => require(['@/views/qualityManagement/qualityRecord/buildQuality'], resolve),
    applyDeliver: (resolve) => require(['@/views/apply/applyDeliver'], resolve),
    applyPay: (resolve) => require(['@/views/apply/applyPay'], resolve),
    productionReportingInitForm: (resolve) => require(['@/views/workManagement/reportRecord/buildRecord'], resolve),
    warehouseAdd: (resolve) => require(['@/views/warehouseManagement/warehouse/warehouseAdd.vue'], resolve),
    stockCheckAddForm: (resolve) => require(['@/views/warehouseManagement/stockCheck/stockCheckForm.vue'], resolve),
    salesContractForm: (resolve) => require(['@/views/salesManagement/salesContract/salesContractForm.vue'], resolve), //销售订单-新建订单
    buildWorkOrder: (resolve) => require(['@/views/workManagement/workOrder/buildWorkOrder.vue'], resolve), //生产工单-新建工单
    productionReport: (resolve) => require(['@/views/workManagement/productTask/form.vue'], resolve), //生产报工-新建报工
    inventoryOrderForm: (resolve) => require(['@/views/warehouseManagement/inventoryOrder/form.vue'], resolve), //入库单-新建入库
    outboundOrderForm: (resolve) => require(['@/views/warehouseManagement/outboundOrder/form.vue'], resolve), //入库单-新建入库
    customerForm: (resolve) => require(['@/views/salesManagement/customerManagement/customerForm.vue'], resolve), //客户-新建客户
  },

  data() {
    return {
      apiBaseUrlDownload,
      datalist: [],
      selectedlist: [],
      topArray: [
        {
          title: '待处理申请',
          number: '',
          img: topOne,
          applyType: 'waiterDeal',
        },
        {
          title: '已处理申请',
          number: '',
          img: topTwo,
          applyType: 'alreadyDeal',
        },
        {
          title: '已发起申请',
          number: '',
          img: topThree,
          applyType: 'alreadyLaunch',
        },
        {
          title: '抄送我的',
          number: '',
          img: topFour,
          applyType: 'copyToMe',
        },
      ],
      modal: {
        title: '常用设置',
        visible: false,
        confirmLoading: false,
      },
      applyList: [],
      applyList: [],
      selectTotal: 0,
      selectIndex: null,
      antelopeParams: {},
    }
  },
  created() {
    // commonlyQueryApplyForm().then((res) => {
    //   if (res.result) {
    //     this.datalist = res.result
    //   } else {
    //     this.$antdMessage.warning(res.message)
    //   }
    // })
    let antelopeFlag = this.$ls.get(LING_YANG_ROLE_TYPE)
    this.antelopeParams = {}
    if (antelopeFlag) {
      this.antelopeParams.antelopeFlag = antelopeFlag
    }
    this.getSelectedList()
    this.getMyoperationNum()
  },
  methods: {
    handleOk() {
      console.log(this.selectedlist)
      let arr = []
      this.selectedlist.forEach((item, i) => {
        item.orderNum = i
        item.applicationId = item.id
        let obj = {
          applicationId: item.id,
          attachment: item.attachment,
          name: item.name,
          orderNum: i,
          path: item.path,
          useScope: item.useScope,
        }
        arr.push(obj)
      })
      this.modal.confirmLoading = true
      // putAction('/sys/home/update', []).then((res) => {
      putAction('/sys/home/update', arr).then((res) => {
        if (res.code == 200) {
          this.modal.visible = false
          this.$toast(res.message)
          this.getSelectedList()
        }
        this.modal.confirmLoading = false
      })
    },
    addApp(app) {
      this.$set(app, 'isSelect', '1')
      this.applyList[this.selectIndex].selectTotal += 1
      this.selectedlist.push(app)
    },
    delApp(app) {
      console.log(app, this.selectedlist)
      for (let i = 0; i < this.selectedlist.length; i++) {
        const item = this.selectedlist[i]
        if (item.applicationId == app.id || item.id == app.id) {
          this.$set(app, 'isSelect', null)
          this.selectedlist.splice(i, 1)
          this.applyList[this.selectIndex].selectTotal -= 1
          return
        }
      }
    },
    selectApp(i) {
      this.selectIndex = i
    },
    cancel() {
      this.modal.visible = false
      this.selectIndex = 0
    },
    setApp() {
      // if (this.applyList.length > 0) {
      //   this.selectTotal = 0
      //   this.applyList.forEach((item) => {
      //     this.selectTotal += item.selectTotal
      //   })
      //   this.selectIndex = 0
      //   this.modal.visible = true
      // } else {
      //   }
      this.getSelectedList()
      getAction('/sys/home/application', { ...this.antelopeParams, useScope: 'pc' }).then((res) => {
        if (res.code == 200) {
          this.applyList = res.result
          if (this.applyList.length > 0) {
            this.selectTotal = 0
            this.selectIndex = 0
            this.applyList.forEach((item) => {
              this.selectTotal += item.selectTotal
            })
          }
          this.modal.visible = true
        }
      })
    },
    getSelectedList() {
      getAction('/sys/home/queryMyself', { ...this.antelopeParams, useScope: 'pc' }).then((res) => {
        this.datalist = res.result || []
        this.selectedlist = JSON.parse(JSON.stringify(this.datalist))
        for (let i = 0; i < this.selectedlist.length; i++) {
          const item = this.selectedlist[i]
          item.id = item.applicationId
        }
      })
    },
    go(menu) {
      this.$store.commit('SET_CURRENT_PREFIX', '/jksaas-produce/produce')
      console.log(menu, '222')
      if (menu == '/salesContractForm') {
        this.$refs.salesContractForm.initForm()
      } else if (menu == '/buildWorkOrder') {
        this.$refs.buildWorkOrder.initForm()
      } else if (menu == '/productTask/report/form') {
        this.$refs.productionReport.initDetail()
      } else if (menu == '/inventoryOrder/form') {
        this.$refs.inventoryOrderForm.initForm()
      } else if (menu == '/customerForm') {
        this.$refs.customerForm.open()
      } else if (menu == '/outboundOrder/form') {
        this.$refs.outboundOrderForm.initForm()
      } else if (menu == '/warehouseManagement/goodsManagement/goodsManagementAdd') {
        this.$refs.goodsManagementAdd.initForm()
      } else if (menu.indexOf('buildOutStock') != '-1') {
        this.$refs.buildOutStock.initForm()
      } else if (menu.indexOf('buildInStock') != '-1') {
        this.$refs.buildInStock.initForm()
      } else if (menu.indexOf('addWarehouse') != '-1') {
        this.$refs.warehouseAdd.initForm()
      } else if (menu.indexOf('stockCheckForm') != '-1') {
        this.$refs.stockCheckAddForm.initForm()
      } else if (menu == '/buildQuality') {
        this.$refs.buildQuality.initForm()
      } else if (menu == '/apply/applyDeliver') {
        this.$refs.applyDeliver.initForm({})
      } else if (menu == '/apply/applyPay') {
        this.$refs.applyPay.initForm()
      } else if (menu == '/buildRecord') {
        this.$refs.productionReportingInitFormRef.initForm() // 生产报工
      } else {
        this.$router.push({
          path: menu,
          query: {
            fromPage: 'homePage',
          },
        })
      }
    },
    goNextPage(item) {
      let pathUrl = ''
      if (item.applyType == 'waiterDeal') {
        pathUrl = '/waiterApply'
      } else {
        pathUrl = `/${item.applyType}`
      }
      let paramsObj = {
        applyType: item.applyType,
      }
      this.$openWay(this, false, pathUrl, paramsObj)
    },
    getMyoperationNum() {
      // getAction('/jksaas-produce/produce/proc/apply/queryApplyNum').then((res) => {
      //   if (res.success) {
      //     // let arr = res.result
      //     // if (arr.length > 0) {
      //     //   arr.forEach(item => {
      //     //     if (item.type == 'pending') { // 待处理申请
      //     //       this.topArray[0].number = item.amout
      //     //     }
      //     //     if (item.type == 'processed') { // 已处理申请
      //     //       this.topArray[1].number = item.amout
      //     //     }
      //     //     if (item.type == 'applyed') { // 已发起申请
      //     //       this.topArray[2].number = item.amout
      //     //     }
      //     //     if (item.type == 'notifier') { // 抄送我的
      //     //       this.topArray[3].number = item.amout
      //     //     }
      //     //   })
      //     // }
      //     // console.log(this.formdata)
      //     this.topArray[0].number = res.result.needToExecuteNum
      //     this.topArray[1].number = res.result.alreadyExecuteNum
      //     this.topArray[2].number = res.result.createOfMineNum
      //     this.topArray[3].number = res.result.noticeMeNum
      //   } else {
      //     this.$toast(res.message)
      //   }
      // })
      getRoute(this.$store.state.user.token, `/jksaas-produce/produce/proc/apply/queryApplyNum`).then((res) => {
        let data = res.data.result
        if (res.data.success) {
          this.topArray[0].number = data.needToExecuteNum
          this.topArray[1].number = data.alreadyExecuteNum
          this.topArray[2].number = data.createOfMineNum
          this.topArray[3].number = data.noticeMeNum
        } else {
          this.$toast(res.data.message)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 0;
}
.groupName {
  font-size: 16px;
  color: #1890ff;
  font-weight: 600;
  margin-bottom: 5px;
}
.containerBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px 60px;
  margin-bottom: 16px;
}
.approval-label {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 20px;
  font-weight: bold;
}
.font-title {
  font-size: 16px;
  color: rgb(0, 0, 0);
}
.icon-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  align-items: center;
  border-style: none !important;
  padding: 14px 0;
  width: 150px;
  // margin-right: 60px;
  cursor: pointer;
}
.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  height: 44px;
  width: 44px;
  border-radius: 10px;
  margin-bottom: 8px;
}
div.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  box-sizing: border-box;
  padding: 23px 0;
  background: #fff;
  div.itemBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    height: 44px;
    padding: 0px 60px;
    position: relative;
    &:nth-last-child(-n + 3) {
      border-left: 1px solid #eeeeee;
    }
    img.leftBox {
      width: 44px;
      height: 44px;
      border-radius: 6px;
      cursor: pointer;
    }

    div.rightBox {
      height: 44px;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
      margin-left: 16px;
      div.rightTop {
        font-size: 24px;
        color: #191f25;
        line-height: 24px;
      }

      div.rightBot {
        font-size: 14px;
        color: #888888;
      }
    }
  }
}
.parentBox {
  margin-bottom: 16px;
  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}
.sonBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.app-box {
  display: flex;
  max-height: 500px;
}
.checked-apps {
  width: 30%;
  height: 100%;
  padding: 16px 0px 16px 20px;
  border-right: 1px solid #e8e8e8;
}
.for-apps {
  font-size: 16px;
  color: rgb(0, 0, 0);
  text-align: right;
  padding: 8px 10px;
  cursor: pointer;
}
.for-apps-active {
  font-size: 16px;
  color: #1890ff;
  background: rgba(24, 143, 255, 0.1);
  text-align: right;
  padding: 8px 10px;
  cursor: pointer;
}
.apply-box {
  width: 100%;
  height: 500px;
  padding: 16px 20px;
  overflow: scroll;
}
.app-wrap {
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
}
.app {
  width: 25%;
  text-align: center;
  margin-bottom: 16px;
}
.action-icon {
  position: absolute;
  top: -5px;
  left: 35px;
  cursor: pointer;
}
</style>
